<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
	</head>

	<body>
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a id="mephoto" href="javascript:;">
						<span class="mui-pull-right mui-icon mui-icon-arrowright" style="line-height: 42px;color:gray;margin-left:3px;"></span>
						<img id="picSmall" class="mui-media-object mui-pull-right" src="images/face-cat.jpg">
						<div class="mui-media-body" style="line-height: 42px;color:gray;margin-left:3px;">
							头像
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a id="nickname-a" href="javascript:;">
						<span class="mui-pull-right mui-icon mui-icon-arrowright" style="line-height: 42px;color:gray;margin-left:3px;"></span>
						<span id="nickname" class="mui-pull-right" style="line-height: 42px;color:gray;margin-left:3px;"></span>
						<div class="mui-media-body" style="line-height: 42px;color:gray;margin-left:3px;">
							昵称
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<span id="username" class="mui-pull-right" style="line-height: 42px;color:gray;margin-left:3px;"></span>
						<div class="mui-media-body">
							账号
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a id="qrCode-a" href="javascript:;">
						<span class="mui-pull-right mui-icon mui-icon-arrowright" style="line-height: 42px;color:gray;margin-left:3px;"></span>
						<img id="qrCode" class="mui-media-object mui-pull-right" src="images/qrcode.png">
						<div class="mui-media-body">
							二维码
						</div>
					</a>
				</li>
			</ul>
			
			<br />
			
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" style="text-align: center;">
					<a id="exit" href="javascript:;">
						<div class="mui-media-body">
							退出登录
						</div>
					</a>
				</li>
			</ul>
		</div>
		
		<script src="js/common.js"></script>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init();
			
			mui.plusReady(function() {
				var picSmall = document.getElementById("picSmall");
				var nickname = document.getElementById("nickname");
				var username = document.getElementById("username");
				var qrCode = document.getElementById("qrCode");
			
				// 获取当前webview
				var webview = plus.webview.currentWebview();
				// 监听当前页面webview的加载事件
				webview.addEventListener("show", function() {
					loadMe();
				});
				
				webview.addEventListener("refresh", function() {
					loadMe();
				});
				
				// 绑定点击头像跳转到显示页面
				var mephoto = document.getElementById("mephoto");
				mephoto.addEventListener("tap", function() {
					mui.openWindow("me-photo.html", "me-photo");
				});
				
				// 绑定点击修改昵称到显示页面
				var nickname1 = document.getElementById("nickname-a");
				nickname1.addEventListener("tap", function() {
					mui.openWindow("me-nickname.html", "me-nickname");
				});
				
				// 绑定点击二维码到显示页面
				var qrCodeA = document.getElementById("qrCode-a");
				qrCodeA.addEventListener("tap", function() {
					mui.openWindow("me-qrcode.html", "me-qrcode");
				});
				
				var exit = document.getElementById("exit");
				exit.addEventListener("tap", function() {
					// 清空用户信息
					plus.storage.removeItem("user");
					plus.runtime.restart();
				})
				
				// 处理refresh自定义事件
				window.addEventListener("refresh", function() {
					console.log("重新加载数据");
					loadMe();
				});
			});
			
			// 加载当前用户信息
			function loadMe() {
				var user = Cache.get("user");
				console.log("获取内部存储数据:" + JSON.stringify(user));
				document.getElementById("nickname").innerHTML = user.nickname;
				document.getElementById("username").innerHTML = user.username;
				
				if(util.isEmpty(user.picSmall)) {
					picSmall.src = "images/face-cat.jpg";
				} else {
					picSmall.src = user.picSmall;
				}
			}
		</script>
	</body>

</html>
